<template>
  <div class="layout">
    <homeAd></homeAd>
    <Layout>
      <Header>
        <Menu mode="horizontal" :theme="theme1" active-name="1">
          <div class="layout-logo">
            <img src="../assets/1111.png" class="layout-logo">
          </div>
          <div class="layout-nav">
            <MenuItem :name="item.name" v-for="item in titleList" :key="item.name">
              <Icon type="ios-navigate"></Icon>
              {{ item.title }}
            </MenuItem>
            <Radio-group v-model="theme1">
              <Radio label="light"></Radio>
              <Radio label="dark"></Radio>
              <Radio label="primary"></Radio>
            </Radio-group>
          </div>
        </Menu>
      </Header>
      <!--      <Layout :style="'height:'+document.documentElement.clientHeight">-->
      <Layout :style="'height:'+this.maxHeight+'px'">
        <Sider hide-trigger :style="{background: '#fff'}">
          <Menu :theme="theme1" width="auto" :open-names="[defaultOpenMenuName]">
            <Submenu :name="item.name" v-for="item in menuList" :key="item.name">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>
                {{ item.title }}
              </template>
              <MenuItem :name="sonItem.name" v-for="sonItem in item.sonMenuList"
                        :key="sonItem.name">
                <div @click="menuClick(item,sonItem)">
                  {{ sonItem.title }}
                </div>
              </MenuItem>
            </Submenu>
          </Menu>
        </Sider>
        <Layout :style="{padding: '0 24px 24px'}">
          <Breadcrumb :style="{margin: '24px 0'}">
            <BreadcrumbItem>主页</BreadcrumbItem>
            <BreadcrumbItem>{{ defaultMenuTitle }}</BreadcrumbItem>
            <BreadcrumbItem>{{ defaultSonMenuTitle }}</BreadcrumbItem>
          </Breadcrumb>
          <Content v-if="this.defaultSonMenuTitle === this.menuList[0].sonMenuList[0].title"
                   :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
            <mucang-parameter class="middenClass"></mucang-parameter>
          </Content>
          <Content v-else-if="this.defaultSonMenuTitle === this.menuList[0].sonMenuList[1].title"
                   :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
            <Json-tools class="middenClass"></Json-tools>
          </Content>
          <Content v-else-if="this.defaultSonMenuTitle === this.menuList[1].sonMenuList[0].title"
                   :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
            我选择的是{{ this.menuList[1].sonMenuList[0].title }}
          </Content>
          <Content v-else-if="this.defaultSonMenuTitle === this.menuList[1].sonMenuList[1].title"
                   :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
            我选择的是{{ this.menuList[1].sonMenuList[1].title }}
          </Content>
          <Content v-else-if="this.defaultSonMenuTitle === this.menuList[2].title"
                   :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
            我选择的是{{ this.menuList[2].title }}
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>
<script>
import JsonTools from './json-tools'
import mucangParameter from './mucang-parameter'
import homeAd from './home-ad'

export default {
  name: 'home',
  data () {
    return {
      maxHeight: 500,
      theme1: 'dark',
      titleList: [{title: '标题1', name: '1'}, {title: '标题2', name: '2'}, {title: '标题3', name: '3'}],

      menuList: [
        {
          name: '1',
          title: '功能1',
          sonMenuList: [{'name': '1-1', title: '_r生成器'}, {'name': '1-2', title: 'json求和工具'},]
        },
        {
          name: '2',
          title: '功能2',
          sonMenuList: [{'name': '2-1', title: '待定'}, {'name': '2-2', title: '待定2'},]
        },
        {
          name: '3',
          title: '功能3',
          sonMenuList: []
        },
      ],
      defaultMenuTitle: '',
      defaultSonMenuTitle: '',
      defaultOpenMenuName: '',
    }
  },
  methods: {
    menuClick (item, sonItem) {
      this.defaultMenuTitle = item.title
      this.defaultOpenMenuName = item.name
      this.defaultSonMenuTitle = sonItem.title
    },
  },
  computed: {},
  created: function () {
    this.defaultMenuTitle = this.menuList[0].title
    this.defaultOpenMenuName = this.menuList[0].name
    this.defaultSonMenuTitle = this.menuList[0].sonMenuList[0].title
  },
  mounted () {
    this.maxHeight = document.documentElement.clientHeight
  },
  // 注册私有组件
  components: {
    JsonTools,
    mucangParameter,
    homeAd,
  }
}
</script>
<style scoped>
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.layout-logo {
  width: 200px;
  height: 65px;
  /*background: #f5f7f9;*/
  /*border-radius: 3px;*/
  float: left;
  position: relative;
  top: 0px;
  left: -25px;
}

.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}

.middenClass {
  position: absolute;
  left: 50%;
}

.ivu-menu-horizontal {
  height: 64px;
  line-height: 60px;
}
</style>